window.onload=function (){
    fullTable(bookList);
}
var shop =[];

/**
 * 获取对象
 * @param id 对象id
 * @returns {HTMLElement} 返回对象
 */
function $(id){
    return document.getElementById(id);
}

/*
* 将数组内容填充表格数据
* */
function fullTable(array){
    let str="";
    array.forEach(n =>{
        str += `<tr><td><img src="${n.img}" alt=""></td><td>${n.name}</td><td>${n.author}</td>
                        <td>${n.date}</td><td>${n.price}</td>
                        <td><input type="button" value="查看" onclick="findMoreData(${n.id})">
                        <input type="button" value="加入购物车" onclick="showShopDiv(${n.id})"></td></tr>`;
    });
    $("data").innerHTML=str;
}


/**
 * 将数组内容填充表格数据
 */
function fullTableShop(array){
    let str="";
    var total=0;
    // for (var i=0;i<shop.length;i++){
    array.forEach(n=>{
            str+=`<tr><td>${n.book.name}</td>
                <td>${n.book.price}</td>
                  <td><input type="text" style="width: 100px;height: 20px" id="num" value="${n.num}" onblur="bookPrice(this,${n.book.id})"></td>
                 <td><input type="button" value="${n.num*n.book.price}"></td>
                 <td><input type="button" value="移除商品" onclick="del(${n.id})"></td></tr>
                `;
        total+=n.num*n.book.price;
        });
    // }

    $("shopTable").innerHTML=str;
    $("sumSpan").innerHTML="总价："+total;

}


function bookPrice(Obj,id){
    if (Obj.value==null || Obj.value.length <=0){
        Obj.value=1;
    }
    let shopObj=shop.find(n => n.book.id === id);
    shopObj.num=parseInt(Obj.value);
    // $("priceTxt").value=shopObj.num*shopObj.book.price;
    fullTableShop(shop);
}

/**
 * 按书名查找
 */
function findByName(){
   var nameStr=$("nameTxt").value;
   var newList=bookList.filter(n => n.name.indexOf(nameStr) != -1);
   fullTable(newList);
}


/**
 * 显示书籍详细信息
 * @param id 书籍编号
 */
function findMoreData(id){
    var book=bookList.filter(n => n.id === id);
    let str1="";
    let str2="";
    book.forEach(n =>{
        str1+=`<tr><td height="100px">图书名：${n.name}</td></tr>
                <tr><td height="100px">作者：${n.author}</td></tr>
                  <tr><td height="100px">出版日期：${n.date}</td></tr>
                 <tr><td height="100px">售价：${n.price}</td></tr>
                `;
    });
    book.forEach(n =>{
        str2+=`<tr><td><img src="${n.face}" height="200px" width="200px"></td></tr>
                `;
    });
    $("moreData").innerHTML=str1;
    $("moreImg").innerHTML=str2;
}


/**
 * 显示购物车
 * @param id 书籍编号
 */
function showShopDiv(id){
    addBook(id);
    $("shopDiv").style.visibility = "visible";
}

/**
 * 添加书籍
 * @param id 书籍编号
 */
function addBook(id){
    var shopBaen=shop.find(n=> n.book.id === id);
    if (shopBaen != null){
        shopBaen.num++;
    }
    else {
        var book =bookList.find(n=> n.id ===id);
        var shopSum={book,num:1};
        shop.push(shopSum);
    }
    fullTableShop(shop);

   //  var tmpObj=bookList.filter(n => n.id ==id);
   //  shop.book=tmpObj;
   //  shop.num=1;
   //  console.log(shop);
   // if (shop.filter(n=> n.id === tmpId)){
   //     tmpObj.num+=1;
   //     shop.push(tmpObj);
   // }
   //
   //
   //  fullTableShop(tmpObj);
}

/**
 * 移除商品
 * @param id 商品编号
 */
function del(id){
    let index=shop.findIndex(n => n.book.id === id);
    //删除指定下标的元素
    shop.splice(index,1);
    fullTableShop(shop,"");
}




/**
 * 返回主界面
 */
function backToMain(){
    $("shopDiv").style.visibility = "hidden";
}